<div class="row">
    <div class="col-md-6">
        <div class="panel panel-widget box red">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-gift"></i>标题
                </div>
                <div class="actions">
                    <a href="javascript:;" class="btn btn-default btn-sm">
                        <i class="fa fa-pencil"></i> 编辑 </a>
                </div>
            </div>
            <div class="panel-body" style="display: block;">
                内容
            </div>
        </div>
        <div class="panel panel-widget box red-pink">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-gift"></i>标题
                </div>
                <div class="tools">
                    <a href="javascript:;" class="collapse">
                    </a>
                    <a href="#portlet-config" data-toggle="modal" class="config">
                    </a>
                    <a href="javascript:;" class="reload">
                    </a>
                </div>
            </div>
            <div class="panel-body">
                内容
            </div>
        </div>
        <div class="panel panel-widget box yellow">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-gift"></i>标题
                </div>
                <div class="actions">
                    <a href="javascript:;" class="btn btn-default btn-sm">
                        <i class="fa fa-pencil"></i> 编辑 </a>
                    <div class="btn-group">
                        <a class="btn btn-default btn-sm" href="javascript:;" data-toggle="dropdown" aria-expanded="false">
                            <i class="fa fa-user"></i> 用户 <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-pencil"></i> 编辑 </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-trash-o"></i> 删除 </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="fa fa-ban"></i> 禁止 </a>
                            </li>
                            <li class="divider">
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <i class="i"></i> 管理员 </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                内容
            </div>
        </div>
        <div class="panel panel-widget box blue tabbable">
            <div class="panel-heading">
                <div class="caption">
                    <i class="fa fa-gift"></i>标题
                </div>
                <ul class="nav nav-tabs">
                    <li>
                        <a href="#portlet_tab_3" data-toggle="tab">
              Tab 3 </a>
                    </li>
                    <li>
                        <a href="#portlet_tab_2" data-toggle="tab">
              Tab 2 </a>
                    </li>
                    <li class="active">
                        <a href="#portlet_tab_1" data-toggle="tab">
              Tab 1 </a>
                    </li>
                </ul>
            </div>
            <div class="panel-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="portlet_tab_1">
                        <p>
                            内容1
                        </p>
                    </div>
                    <div class="tab-pane" id="portlet_tab_2">
                        <p>
                            内容2
                        </p>
                    </div>
                    <div class="tab-pane" id="portlet_tab_3">
                        <p>
                            内容3
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert alert-warning">
            <h4 class="block">主题颜色参考</h4>
            <p> 为了丰富页面，Mower包含一些样式，请参考<a class="alert-link" href="/components.html#panels">设置。</a>
            </p>
        </div>
    </div>
    <div class="col-md-6">
        <div class="panel panel-widget light bordered">
            <div class="panel-heading">
                <div class="caption">
                    <i class="icon-speech"></i>
                    <span class="caption-subject bold uppercase"> 标题</span>
                    <span class="caption-helper">带边框...</span>
                </div>
                <div class="actions">
                    <a href="javascript:;" class="btn btn-circle btn-default">
                        <i class="fa fa-pencil"></i> 编辑 </a>
                    <a href="javascript:;" class="btn btn-circle btn-default">
                        <i class="fa fa-plus"></i> 增加 </a>
                </div>
            </div>
            <div class="panel-body">
                <p>内容</p>
            </div>
        </div>
        <div class="panel panel-widget light">
            <div class="panel-heading">
                <div class="caption">
                    <i class="icon-speech"></i>
                    <span class="caption-subject bold uppercase"> 标题</span>
                    <span class="caption-helper">副标题...</span>
                </div>
                <div class="actions">
                    <a href="javascript:;" class="btn btn-circle btn-default">
                        <i class="fa fa-pencil"></i> 编辑 </a>
                    <a href="javascript:;" class="btn btn-circle btn-default">
                        <i class="fa fa-plus"></i> 增加 </a>
                </div>
            </div>
            <div class="panel-body">
                <p>内容</p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body" style="background-color: #fff;padding: 10px ">
                <div class="mu-tabbable border-remove">
                    <ul class="nav nav-tabs ">
                        <li class="active"><a href="#tab_5_1" data-toggle="tab">主题面板</a>
                        </li>
                        <li><a href="#tab_5_2" data-toggle="tab">清新样式</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_5_2">
                                                    <pre class="prettyprint">
&lt;div class="panel panel-widget light bordered"&gt;
    &lt;div class="panel-heading"&gt;
        &lt;div class="caption"&gt;
            &lt;i class="icon-speech"&gt;&lt;/i&gt;
            &lt;span class="caption-subject bold uppercase"&gt; 标题&lt;/span&gt;
            &lt;span class="caption-helper"&gt;带边框...&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="actions"&gt;
            &lt;a href="javascript:;" class="btn btn-circle btn-default"&gt;
                &lt;i class="fa fa-pencil"&gt;&lt;/i&gt; 编辑 &lt;/a&gt;
            &lt;a href="javascript:;" class="btn btn-circle btn-default"&gt;
                &lt;i class="fa fa-plus"&gt;&lt;/i&gt; 增加 &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
        &lt;p&gt;内容&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="panel panel-widget light"&gt;
    &lt;div class="panel-heading"&gt;
        &lt;div class="caption"&gt;
            &lt;i class="icon-speech"&gt;&lt;/i&gt;
            &lt;span class="caption-subject bold uppercase"&gt; 标题&lt;/span&gt;
            &lt;span class="caption-helper"&gt;副标题...&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="actions"&gt;
            &lt;a href="javascript:;" class="btn btn-circle btn-default"&gt;
                &lt;i class="fa fa-pencil"&gt;&lt;/i&gt; 编辑 &lt;/a&gt;
            &lt;a href="javascript:;" class="btn btn-circle btn-default"&gt;
                &lt;i class="fa fa-plus"&gt;&lt;/i&gt; 增加 &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
        &lt;p&gt;内容&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
   </pre>
                        </div>
                        <div class="tab-pane" id="tab_5_1">
                            <pre class="prettyprint">
&lt;div class="panel panel-widget box red"&gt;
  &lt;div class="panel-heading"&gt;
    &lt;div class="caption"&gt;
      &lt;i class="fa fa-gift"&gt;&lt;/i&gt;标题
    &lt;/div&gt;
    &lt;div class="actions"&gt;
      &lt;a href="javascript:;" class="btn btn-default btn-sm"&gt;
      &lt;i class="fa fa-pencil"&gt;&lt;/i&gt; 编辑 &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel-body" style="display: block;"&gt;
      内容
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="panel panel-widget box red-pink"&gt;
  &lt;div class="panel-heading"&gt;
      &lt;div class="caption"&gt;
          &lt;i class="fa fa-gift"&gt;&lt;/i&gt;标题
      &lt;/div&gt;
      &lt;div class="tools"&gt;
          &lt;a href="javascript:;" class="collapse"&gt;
          &lt;/a&gt;
          &lt;a href="#portlet-config" data-toggle="modal" class="config"&gt;
          &lt;/a&gt;
          &lt;a href="javascript:;" class="reload"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel-body"&gt;
      内容
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="panel panel-widget box yellow"&gt;
&lt;div class="panel-heading"&gt;
  &lt;div class="caption"&gt;
    &lt;i class="fa fa-gift"&gt;&lt;/i&gt;标题
  &lt;/div&gt;
  &lt;div class="actions"&gt;
    &lt;a href="javascript:;" class="btn btn-default btn-sm"&gt;
    &lt;i class="fa fa-pencil"&gt;&lt;/i&gt; 编辑 &lt;/a&gt;
    &lt;div class="btn-group"&gt;
      &lt;a class="btn btn-default btn-sm" href="javascript:;" data-toggle="dropdown" aria-expanded="false"&gt;
      &lt;i class="fa fa-user"&gt;&lt;/i&gt; 用户 &lt;i class="fa fa-angle-down"&gt;&lt;/i&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu pull-right"&gt;
        &lt;li&gt;
          &lt;a href="javascript:;"&gt;
          &lt;i class="fa fa-pencil"&gt;&lt;/i&gt; 编辑 &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="javascript:;"&gt;
          &lt;i class="fa fa-trash-o"&gt;&lt;/i&gt; 删除 &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="javascript:;"&gt;
          &lt;i class="fa fa-ban"&gt;&lt;/i&gt; 禁止 &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="divider"&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="javascript:;"&gt;
          &lt;i class="i"&gt;&lt;/i&gt; 管理员 &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="panel-body"&gt;
    内容
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="panel panel-widget box blue tabbable"&gt;
    &lt;div class="panel-heading"&gt;
      &lt;div class="caption"&gt;
        &lt;i class="fa fa-gift"&gt;&lt;/i&gt;标题
      &lt;/div&gt;
      &lt;ul class="nav nav-tabs"&gt;
        &lt;li&gt;
          &lt;a href="#portlet_tab_3" data-toggle="tab"&gt;
          Tab 3 &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#portlet_tab_2" data-toggle="tab"&gt;
          Tab 2 &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="active"&gt;
          &lt;a href="#portlet_tab_1" data-toggle="tab"&gt;
          Tab 1 &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="panel-body"&gt;
      &lt;div class="tab-content"&gt;
        &lt;div class="tab-pane active" id="portlet_tab_1"&gt;
          &lt;p&gt;
             内容1
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="portlet_tab_2"&gt;
          &lt;p&gt;
            内容2
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tab-pane" id="portlet_tab_3"&gt;
          &lt;p&gt;
             内容3
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
              </pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
window.prettyPrint();
</script>
